<template>
	<view class="selectaddress">
		<view class="topbar"></view>
		<view class="top">
			<uni-icons class="back" type="back" size="30" @click="back"></uni-icons>
			<view>地址管理</view>
		</view>
		<view class="toptop"></view>
		<view class="list">
			<view class="form" v-for="(item,index) in locationlist" :key="index">
				<view>
					<text>{{item.name}}</text>
					<text>{{item.phone}}</text>
					<image src="https://cdn3.axureshop.com/demo/2116044/images/%E5%9C%B0%E5%9D%80%E7%AE%A1%E7%90%86/u4235.png" @click="toedit(item.id)"></image>
				</view>
				<view>
					收货地址：
					<text>{{item.address+item.houseNum}}</text>
				</view>
			</view>
			<!-- <view class="form">
				<view>
					<text>李小花</text>
					<text>18854138766</text>
					<image src="https://cdn3.axureshop.com/demo/2116044/images/%E5%9C%B0%E5%9D%80%E7%AE%A1%E7%90%86/u4235.png"></image>
				</view>
				<view>收货地址：广东省广州市大华区明离路科技园880号</view>
			</view> -->
		</view>
		<view class="bottom"></view>
		
		<view class="add">
			<button @click="toadd()">
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%93%E7%AE%97/u2490.png" mode=""></image>
				添加地址
			</button>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js' 
	export default {
		data() {
			return {
				state:'',
				locationlist:[],
				userid:'1',
				locationid:''
			}
		},
		methods: {
			back(){
				let pages = getCurrentPages();
				console.log(pages);
				let backPages = pages.length - 1;
				uni.navigateBack({
					delta:backPages,
				})
			},
			toadd(){
				uni.navigateTo({
					url:"/pages/addaddress/addaddress"
				})
			},
			toedit(locationid){
				console.log(locationid);
				this.locationid = locationid;
				uni.setStorage({
					key:'locationid',
					data:{locationid:this.locationid}
				});
				uni.navigateTo({
					url:"/pages/editaddress/editaddress"
				})
			}
			
		},
		onShow(){
			http({
				url:'/sellocation',
				method:'post',
				data:{
					userid:this.userid,
				},
				success: (res) => {
					// console.log(res);
					this.locationlist = res.data;
					console.log(this.locationlist);
				}
			})
		},
	}
</script>

<style>
page{
	background-color: #F2F2F2;
}
.topbar{
	width: 100%;
	background-color: #ffffff;
}
.toptop{
	height: 120rpx;
}
.top{
	padding-top: 60rpx;
	padding-bottom: 20rpx;
	display: flex;
	justify-content: center;
	font-size: 30rpx;
	background-color: #ffffff;
	position: fixed;
	width: 100%;
}
.top>.back{
	position: absolute;
	left: 0;
	zoom: 0.8;
}
.list{
	margin-top: 20rpx;
}
.list>.form{
	margin-top: 35rpx;
	margin-left: 30rpx;
	border-radius: 15rpx;
	width: 690rpx;
	height: 160rpx;
	background-color: #ffffff;
}
.list .form view{
	padding-left: 30rpx;
}
.list .form view:nth-child(1){
	padding-top: 25rpx;
}
.list .form view:nth-child(2){
	padding-top: 20rpx;
	font-size: 25rpx;
	color: #999999;
}
.list>.form view:nth-child(1) text{
	font-size: 26rpx;
	font-weight: bold;
}
.list>.form view:nth-child(1) text:nth-child(2){
	margin: 7rpx;
	position: absolute;
	left: 130rpx;
}
.list>.form view text:nth-child(2){
	padding-left: 30rpx;
}
.list>.form view image{
	width: 25rpx;
	height: 25rpx;
	margin-left: 320rpx;
	margin-top: 10rpx;
	cursor: pointer;
	position: absolute;
	right: 70rpx;
}
.bottom{
	height: 130rpx;
}
.add{
	width: 100%;
	height: 130rpx;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
}
.add button{
	width: 650rpx;
	background-color: #ffffff;
	color: #FA746B;
	font-size: 30rpx;
	margin-top: 20rpx;
	border: 1rpx solid #FA746B;
	border-radius: 50rpx;
}
.add button image{
	width: 25rpx;
	height: 25rpx;
	margin-right: 10rpx;
}
</style>
